<template>
    <div>
        <el-row :gutter="20">
            <el-col :span="15" :offset='2'>
                <el-input v-model="inputVal" placeholder="请输入内容"></el-input>
            </el-col>
            <el-col :span="2">
                <el-button type="primary" @click='search'>搜索</el-button>
            </el-col>
        </el-row>
        <el-row :gutter="20" style="margin-top:30px;">
            <el-col :span="2" :offset='2'>
                <p>领域</p>
            </el-col>
            <el-col :span="15">
                <div v-for="(item,index) in selectArr" :key='index'>
                    <el-checkbox v-model="item.checked" border :checked="item.checked" @change='changeVal(item)'>{{item.name}}</el-checkbox>
                </div>

            </el-col>
        </el-row>
        <el-row :gutter="20" style="margin-top:30px;">
            <el-col :span="2" :offset='2'>
                <p>语言</p>
            </el-col>
            <el-col :span="15">
                <el-tag :key="tag" v-for="tag in dynamicTags" closable :disable-transitions="false" @close="handleClose(tag)">
                    {{tag}}
                </el-tag>
                <el-input class="input-new-tag" v-if="inputVisible" v-model="inputValue" ref="saveTagInput" size="small" @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm">
                </el-input>
                <el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>
            </el-col>
        </el-row>
    </div>
</template>
<script>
import * as API from "../../http/api.js";
import Vue from "vue";
export default {
    name: `add`,
    data() {
        return {
            dynamicTags: [],
            inputVisible: false,
            inputValue: "",
            inputVal: ``,
            selectArr: [],
            userData: {},
            userInfo: {},
            checkedList: [],
            httpData: {
                number: 123,
                fileList: [
                    {
                        id: 1,
                        name: `java`
                    }
                ]
            }
        };
    },
    created() {
        this.getData();
    },
    methods: {
        changeVal() {
            this.httpData.fileList = [];
            this.selectArr.forEach((item, index) => {
                if(item.checked){
                    let obj={
                        id:item.id,
                        name:item.name
                    }
                    this.httpData.fileList.push(obj)
                }
            });
            // this.httpData.fileList
        },
        handleClose(tag) {
            this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
        },

        showInput() {
            this.inputVisible = true;
            this.$nextTick(_ => {
                this.$refs.saveTagInput.$refs.input.focus();
            });
        },

        handleInputConfirm() {
            let inputValue = this.inputValue;
            if (inputValue) {
                this.dynamicTags.push(inputValue);
            }
            this.inputVisible = false;
            this.inputValue = "";
        },
        // 获取首页数据
        getData() {
            let that = this;
            let time = new Date();
            that
                .$axios({
                    method: "get",
                    url: API.queryData,
                    params: {
                        name: `test`
                    },
                    customErr: true
                })
                .then(res => {
                    console.log(`首页数据`, res);
                    if (res.code === 0) {
                        this.selectArr = res.data;
                        this.dynamicTags = res.language;
                    }
                });
        },
        // 搜索个人信息
        search() {
            let that = this;
            let time = new Date();
            that
                .$axios({
                    method: "get",
                    url: API.searchUser,
                    params: {
                        number: that.inputVal
                    }
                })
                .then(res => {
                    console.log(`个人信息`, res);
                    this.userInfo = res;
                    this.userData = res.data;

                    this.selectArr.forEach(chiledItem => {
                        console.log(`ddd`, chiledItem);
                        this.userData.forEach(item => {
                            if (item.id === chiledItem.id) {
                                console.log(
                                    `》》》》》》》》》》》》》》`,
                                    item
                                );
                                Vue.set(chiledItem, "checked", true);
                            }
                        });
                    });
                });
        }
    }
};
</script>
<style lang='scss' scoped>
.el-tag + .el-tag {
    margin-left: 10px;
}
.button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
}
.input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
}
</style>
